<template>
	<div class="headerBox">
		<ul class="listContain">
			<router-link to="/" class="logoLink">
				<img class="logo" src="../assets/logo.png" height="55" width="179" alt="">
			</router-link>
			<router-link to="/" class="items first-child" tag="li" :class="{active:homeActive}" exact>
				首页
			</router-link>
			<li class="items arrow" @mouseenter="show" @mouseleave="hide" :class="{active:industryActive}" exact>
				行业方案
				<ul class="industry" v-show="caseShow">
					<router-link to="/cinema" class="cases" tag="li">
						影院方案
					</router-link>
					<router-link to="/catering" class="cases" tag="li">
						餐饮方案
					</router-link>
					<router-link to="/super" class="cases" tag="li">
						商超方案
					</router-link>
				</ul>
			</li>
			<router-link to="/customer" class="items" tag="li" :class="{active:caseActive}" exact>
				客户案例
			</router-link>
			<li class="items">
				<a href="http://www.51byyb.cn/DSManage">
					云平台
				</a>
			</li>
			<router-link to="/contact" class="items" tag="li" :class="{active:contactActive}" exact>
				联系我们
			</router-link>
		</ul>
	</div>
</template>

<script>
	export default{
		data () {
			return {
				caseShow: false,
				homeActive: true,
				caseActive: false,
				contactActive: false,
				industryActive: false
			}
		},
		methods:{
			show () {
				this.caseShow = true
			},
			hide () {
				this.caseShow = false
			}
		},
		watch: {
		    $route (to,from){
		    	let route = to.path;
		    	console.log(route)
		    	switch(route){
			      	case '/': case '/news' : 
			      		this.homeActive = true;
						this.caseActive = false;
						this.contactActive = false;
						this.industryActive = false;
			      		break;
			      	case '/customer' :
			      		this.homeActive = false;
						this.caseActive = true;
						this.contactActive = false;
						this.industryActive = false;
			      		break;
			      	case '/contact' : 
			      		this.homeActive = false;
						this.caseActive = false;
						this.contactActive = true;
						this.industryActive = false;
			      		break;
			      	default : 
			      		this.homeActive = false;
						this.caseActive = false;
						this.contactActive = false;
			      		this.industryActive = true;
		    	}
		    }
		},
		mounted () {
		    let route = this.$route.path;
		    console.log("*"+route)
		    switch(route){
		      	case '/': case '/news' : 
		      		this.homeActive = true;
					this.caseActive = false;
					this.contactActive = false;
					this.industryActive = false;
		      		break;
		      	case '/customer' :
		      		this.homeActive = false;
					this.caseActive = true;
					this.contactActive = false;
					this.industryActive = false;
		      		break;
		      	case '/contact' : 
		      		this.homeActive = false;
					this.caseActive = false;
					this.contactActive = true;
					this.industryActive = false;
		      		break;
		      	default : 
		      		this.homeActive = false;
					this.caseActive = false;
					this.contactActive = false;
		      		this.industryActive = true;
		    }
		}
	}
</script>

<style scoped>
	.active {
		color:#3573b9;
	}
	.headerBox {
		width: 1000px;
		height: 80px;
		margin: 0 auto;
	}
	.logoLink {
		display: inline-block;
		float: left;
		margin-top: 15px;
	}
	.listContain {
		height: 100%;
	}
	.listContain>.items {
		list-style: none;
		height: 100%;
		line-height: 80px;
		width: 90px;
		float: left;
		text-align: center;
		cursor: pointer;
		font-size: 18px;
	}
	.cases {
		font-size: 14px;
	}
	.listContain>li:hover, .listContain>li:hover a {
		color: #3573b9;
	}
	.first-child {
		margin-left: 35%;
	}
	.items>a {
		width: 100%;
		height: 100%;
		display: inline-block;
		text-decoration :none;
		color :#464646;
	}
	.arrow {
		position: relative;
		padding-right: 10px;
		margin-right: 10px;
		background: url("../assets/grayArrow.png") no-repeat 100% 52%;
	}
	.arrow:hover {
		padding-right: 10px;
		margin-right: 10px;
		background: url("../assets/blueArrow.png") no-repeat 100% 52% !important;
	}
	.industry {
		position: absolute;
		top: 60px;
		left: -5%;
		z-index: 1;
		list-style: none;
		width: 110%;
		background: #f7f7f7;
		color: #555;
		border-radius: 4px;
		opacity: 0.9;
	}
	.industry>li:hover {
		/* background: #fff; */
		color: #3573b9;
	}
	.industry *{
		height: 30px;
		line-height: 30px;
	}
	@media screen and (max-width:1600px){
		/* .headerBox {
			margin-left: 220px;
		} */
	}
</style>